// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'

import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import HomeMessage from '../pages/HomeMessage.vue'
import HomeNews from '../pages/HomeNews.vue'
import Detail from '../pages/Detail.vue'
// 创建并暴露一个路由器
export default new VueRouter({
  routes:[
    {
      name:'guanyu',
      path:'/about',
      component:About
    },
    {
      path:'/home',
      component:Home,
      children:[
        {
          path:'news',
          component:HomeNews,
        },
        {
          path:'message',
          component:HomeMessage,
          children:[
            {
              name:'xiangqing',
              path:'detail/:id/:title',
              component:Detail,
              // props的【对象写法】，该对象中的key-value都会以props的形式传递给detail组件---第一种写法
              // props:{a:'111',b:'对象写法'},
              
              // props的【布尔值写法】，若值为真，则会把该路由组件收到的所有params参数以props的形式传递给detail组件(不会影响query参数)---第二种写法
              // props:true

              // props的【函数写法】，值为函数,接受的参数为$route，可以直接解构或连续解构赋值取出数据
              props($route){
                return {id:$route.params.id,title:$route.params.title}
              },
              // 简化写法
              // props({params:{id,title}}){
              //   return {id:id,title:title}
              // }
            }
          ]
        },
      ]
    },
    
  ]
})